@import "ng-devui/styles-var/devui-var.scss";
@import "src/app/@shared/styles/common.scss";

.da-form-card {
  padding-bottom: 24px;
  height: 100%;

  .da-form-card-title {
    margin-bottom: 24px;
  }
}

form {
  margin: 0 auto;
  max-width: 65%;
}

@media only screen and (max-width: 1023px) {
  form {
    max-width: 80%;
  }
}

.single-checkbox {
  display: block;
  margin-right: 8px;
}

.single-checkbox:not(:last-child) {
  margin-bottom: 8px;
}

.form-control-width {
  width: 100%;
}
.u-1-3 {
  width: 90%;
}

.devui-form-horizontal .devui-form-label {
  flex: 0 0 120px;
}

d-button{
  margin-right: 12px;
}
.btn-group{
  margin-top: 8px;
}

.ms-3{
  margin-left: 8px
}
.mt-2{
  margin-top: 6px
}
.mt-3{
  margin-top: 8px
}
.mt-5{
  margin-top: 24px
}
.px-5{
  padding: 25px 0 25px 0!important;
}
.page-footer{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.underline{
  text-decoration: underline;
}
.card{
  width: 100%;
  background-color: $devui-base-bg;
  border-radius: $devui-border-radius-card;
  box-shadow: $devui-shadow-length-base $devui-light-shadow;
  padding: 12px;
}
.d-flex{
  display: flex;
}
.align-items-center{
  align-items: center;
}
.justify-content-center{
  justify-content: center;
}
.flex-col{
  flex-direction: column;
}
.h-100{
  height: 100%;
}
h2{
  margin: 8px;
  font-size: $devui-font-size-data-overview;
}
p{
  font-size: 14px;
}
form{
  max-width: 100%;
}
label{
  font-size: $devui-font-size
}
.invalid{
  color: #f66f6a;
}
:host ::ng-deep .devui-toast{
  transform: translateX(-50%);
}
:host ::ng-deep .custom-class {
  .devui-toast-message-success{
  .devui-toast-item {
    width: 26em;
    color: #252b3a;
    background-color:$devui-success-bg;
    .devui-toast-icon-close{
      top: 10px;
      right: 13px;
      .devui-toast-close-icon {
        fill: #252b3a;
      }
    }
    .devui-toast-image {
      top: 15px;
    }
    .devui-toast-message {
      line-height: 23px;
      .devui-toast-title {
        font-size: 16px;
      }
      p {
        font-size: 14px;
      }
    }
  }
  }
  .devui-toast-item {
    color: #f3f3f3;
    background-color:$devui-red-50;
    width: 26em;
    .devui-toast-icon-close{
      top: 10px;
      right: 13px;
      .devui-toast-close-icon {
        fill: #252b3a;
      }
    }
    .devui-toast-image {
      top: 15px;
    }
    .devui-toast-message {
      line-height: 23px;
      .devui-toast-title {
        font-size: 16px;
      }
      p {
        white-space: nowrap;
        font-size: 14px;
      }
    }
  }
  .devui-toast-message-warn{
    .devui-toast-item {
      color: #252b3a;
      background-color:$devui-warning-bg;
      width: 26em;
      .devui-toast-icon-close{
        top: 10px;
        right: 13px;
        .devui-toast-close-icon {
          fill: #252b3a;
        }
      }
      .devui-toast-image {
        top: 15px;
      }
      .devui-toast-message {
        line-height: 23px;
        .devui-toast-title {
          font-size: 16px;
        }
        p {
          white-space: nowrap;
          font-size: 14px;
        }
      }
    }
  }
}
.encode-rule-lists{

  overflow-y: auto;
  overflow-x: hidden;

}
.encode-rule{
  margin-top: 24px;
}
.da-content-wrapper{
  display: flex;
  flex-direction: column;
  .encode-rule-lists{
    flex-grow: 1;
    d-row{
      height: 100%;
      .card{
        height: 100%;
        overflow: auto;
      }
    }
  }

}
.footer{
  margin-top: 20px;
  padding: 15px 0;
  background-color: $devui-base-bg;
}
